import { useState, useEffect, useMemo, FC } from "react";

import Child from "./components/Child";

interface ItemType {
  nm: string;
  id: number;
  [propname: string]: any;
}

const Index: FC = () => {
  // useState的类型跟vue3的ref的类型加法是一样的
  const [count, setCount] = useState<number>(1);
  const add = (): void => {
    setCount((v) => v + 1);
  };
  const doubleCount = useMemo<number>(() => {
    return count * 2;
  }, [count]);

  const [list, setList] = useState<ItemType[]>([]);
  useEffect(() => {
    fetch(
      "/api/mmdb/movie/v3/list/hot.json?ct=%E6%9D%AD%E5%B7%9E&ci=50&channelId=4"
    )
      .then((response) => response.json())
      .then((res) => {
        console.log(res.data.hot);
        setList(res.data.hot);
      });
  }, []);

  const [value, setValue] = useState<string>("");
  const fn = (e: any) => {
    setValue(e.target.value);
  };

  return (
    <>
      <h2>这是ts页面</h2>
      <button>-</button>
      <span>{count}</span>
      <button onClick={add}>+</button>
      <span>{doubleCount}</span>

      <hr />

      <ul>
        {list.map((item) => (
          <li key={item.id}>{item.nm}</li>
        ))}
      </ul>

      <hr />

      <input type="text" value={value} onChange={fn} />
      <p>{value}</p>

      <hr />

      <Child count={count} />
    </>
  );
};

export default Index;
